<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户故事5</title>
    <!-- 引入 element-ui 的样式文件 -->
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <style>
                .zebra-table tbody tr:nth-child(even) {
            background-color: #edecec; /* 设置偶数行的背景颜色 */
        }
    </style>
</head>

<body>
    <div id="app">
        <el-row>
            <h2 style="text-align: center;">拨款申请审核</h2>
            <el-col :span="6">
                <el-select v-model="filterStatus" placeholder="请选择状态">
                    <el-option label="未审批" value=0></el-option>
                    <el-option label="通过" value=2></el-option>
                    <el-option label="驳回" value=3></el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-input v-model="donationId" placeholder="对申请钱款单号进行检索"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button @click="uh">查询</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="viewGrantHistory">款项发放</el-button>
            </el-col>


        </el-row>
        <el-table :data="donationList" :default-sort="{prop: 'deadline', order: 'ascending'}"  class="zebra-table" :page-size="10" >
            <el-table-column label="募捐单号" prop="donationId"></el-table-column> 
            <el-table-column label="募捐人" prop="donationImage">
                <template slot-scope="scope">
                    <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                    <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                </template>
            </el-table-column>
            <el-table-column label="募捐原因" prop="donationReason"></el-table-column>
            <el-table-column label="截止时间" prop="deadline" sortable>
                <template slot-scope="scope">
                    {{ calculateCompletion(scope.row.deadline) }}
                </template>
            </el-table-column>
            <el-table-column label="救助金额" prop="donationAmount" sortable></el-table-column>
            <el-table-column label="已募金额" prop="donatedAmount" sortable></el-table-column>
            <!-- 要改字段 -->
            <el-table-column label="剩余金额" prop="donatedAmount" sortable></el-table-column>
            <el-table-column label="申请钱款单号" prop="requestMoneyId">
                <template slot-scope="scope">
                  <span style="color: #B8860B">{{ scope.row.requestMoneyId }}</span>
                </template>
              </el-table-column>
            <el-table-column label="申请前款发起时间" prop="time" sortable>
                <template slot-scope="scope">
                    {{ calculateCompletion(scope.row.time) }}
                </template>
            </el-table-column>
            <el-table-column label="待发放款项金钱" prop="donatedAmount" sortable></el-table-column>
            <el-table-column label="评价" prop="evaluate" sortable></el-table-column>
            
            <el-table-column label="状态" prop="status">
                <template slot-scope="scope">
                    {{ getStatusText(scope.row.status) }}
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="250px">
                <template slot-scope="scope">
                  <div class="btn-group" style="display: flex; justify-content: space-between;">
                    <el-link :href="'http://localhost:8888/api/funding/downloadReport?fundingId=' + scope.row.donationId"
                      type="primary">材料下载</el-link>
                    <el-button @click="agreeRequest(scope.row.requestMoneyId)">通过</el-button>
                    <el-button @click="rejectRequest(scope.row.requestMoneyId)">驳回</el-button>
                  </div>
                </template>
              </el-table-column>
              
        </el-table>

    </div>

    <script>
        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                donationList: [],
                minAge: '',
                maxAge: '150',
                donationId: '',
                evaluateInput: '',
                filterStatus: '',
                List: [],
            },
            created() {
                this.search(); // 页面加载时自动触发查询
            },
            watch: {
                filterStatus: function (newVal, oldVal) {
                    this.filterData(); // 监听filterStatus的变化，并在变化时调用filterData()方法
                }
            },
            methods: {
                //状态映射
                getStatusText(status) {
                    switch (status) {
                        case 0:
                            return '未被查看';
                        case 1:
                            return '通过待拨款';
                        case 2:
                            return '通过';
                        case 3:
                            return '驳回';
                        default:
                            return '';
                    }
                },
                //判断
                uh() {
                    if (this.donationId === "") {
                        console.log(this.donationList = this.List);
                        return this.donationList = this.List; // 不进行筛选
                    }
                    this.donationList = this.List;
                    this.donationList = this.donationList.filter(item => {
                        if (typeof item.donationId === 'number' && !isNaN(parseInt(this.donationId))) { // 判断类型是否相同
                            return item.donationId === parseInt(this.donationId); // 判断值是否相等
                        } else {
                            return false; // 类型不同或转换失败，直接返回false
                        }
                    });
                    console.log('筛选后的数据：', this.donationList);
                },

                viewGrantHistory() {
                    // 跳转到款项发放记录页面
                    window.location.href = '/grant-history';
                },
                viewDisbursementLogs() {
                    // 跳转到拨款日志页面
                    window.location.href = '/disbursement-logs';
                },

                //评价
                agreeRequest(requestMoneyId) {
                    this.$prompt('请输入通过的评价内容', '评价', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /\S+/,
                        inputErrorMessage: '评价内容不能为空'
                    }).then(({ value }) => {
                        this.evaluateInput = value;
                        axios.post('http://localhost:8888/api/donations/agreeRequestMoney', {
                            requestMoneyId,
                            evaluate: this.evaluateInput
                        })
                            .then(response => {
                                if (response.data.code === 0) {
                                    alert('评价成功');
                                    this.search()

                                    // 处理成功情况
                                } else {
                                    // 处理失败情况
                                }
                            })
                            .catch(error => {
                                // 请求失败时的处理
                                console.error('请求出错：', error);
                            });
                    }).catch(() => {
                        // 用户点击取消按钮时的处理
                    });
                },
                rejectRequest(requestMoneyId) {
                    this.$prompt('请输入驳回的评价内容', '评价', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /\S+/,
                        inputErrorMessage: '评价内容不能为空'
                    }).then(({ value }) => {
                        this.evaluateInput = value;
                        axios.post('http://localhost:8888/api/donations/rejectRequestMoney', {
                            requestMoneyId,
                            evaluate: this.evaluateInput
                        })
                            .then(response => {
                                if (response.data.code === 0) {
                                    // 处理成功情况
                                    alert('评价成功');
                                    this.search()
                                } else {
                                    // 处理失败情况
                                }
                            })
                            .catch(error => {
                                // 请求失败时的处理
                                console.error('请求出错：', error);
                            });
                    }).catch(() => {
                        // 用户点击取消按钮时的处理
                    });
                },

                //页面
                search() {
                    axios.get('http://localhost:8888/api/donations/getRequestMoneyVo')
                        .then(response => {
                            this.donationList = [];
                            this.List = response.data.data
                            this.donationList = this.List;
                            // this.calculateCompletion();
                            this.filterData(); // 添加筛选方法
                        })
                        .catch(error => {
                            // 请求失败时的处理
                            console.error('请求出错：', error);
                        });
                },
                // 筛选
                filterData() {
                    if (this.filterStatus === "") {
                        return this.donationList = this.List; // 不进行筛选
                    }
                    this.donationList = this.List;
                    this.donationList = this.donationList.filter(item => {
                        if (typeof item.status === 'number' && !isNaN(parseInt(this.filterStatus))) { // 判断类型是否相同
                            return item.status === parseInt(this.filterStatus); // 判断值是否相等
                        } else {
                            return false; // 类型不同或转换失败，直接返回false
                        }
                    });
                    console.log('筛选后的数据：', this.donationList);
                },


                calculateCompletion(deadline) {
                    const timestamp = deadline;
                    const date = new Date(timestamp);

                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                    return formattedDate;
                }
            }


        });
    </script>
</body>

</html>